<template>
  <div class="flex flex-col gap-y-4">
    <div
      v-if="!success"
      class="license-info failed"
      :class="{ platform: source === 2 }">
      <div class="flex flex gap-x-2 truncate">
        <i-icons-failed class="flex-shrink-0 mt-1" />
        <span class="flex gap-x-4 leading-22px truncate">
          <span class="font-bold text-#f53f3f">证书申请失败</span>
          <span class="cursor-pointer text-#ED3C3C" @click="openError">
            错误详情
          </span>
        </span>
      </div>
    </div>
    <div
      v-if="Number(certInfo?.expired_at) > 0"
      class="license-info"
      :class="{ failed: isExpired, platform: source === 2 }">
      <div class="flex justify-between w-full">
        <div class="flex flex-col gap-y-4 w-full">
          <!-- <div
            v-if="source === 1"
            class="flex items-center gap-x-1 text-success font-bold">
            <i-icons-success />
            已上传证书
          </div> -->
          <div class="flex gap-x-8 items-center leading-22px">
            <div class="flex gap-x-4">
              <span class="text-4 w-20">证书品牌</span>
              <span class="text-2">{{ emptyText(certInfo?.brand) }}</span>
            </div>
          </div>
          <div class="flex leading-22px">
            <span class="text-4 mr-4 w-20">到期时间</span>
            <span :class="!isExpired ? 'text-#14AF9C' : 'text-#F53F3F'">
              {{ formatUnix(+certInfo?.expired_at) }}
            </span>
            <a-tag v-if="isExpired" color="#F53F3F" class="system-tag ml-2">
              已过期
            </a-tag>
          </div>
          <a-divider
            class="w-full"
            v-if="source === 1"
            type="dashed"
            margin="0" />
          <div v-if="source === 1" class="flex leading-22px">
            <a-link class="mr-6" :hoverable="false" @click="open">
              <div class="flex items-center justify-center gap-[6px]">
                <i-icons-view-info-open color="#11429D" class="leading-22px!" />
                <span class="leading-22px!">查看详情</span>
              </div>
            </a-link>
            <a-link :hoverable="false" @click="openUpload!({ replace: true })">
              <div class="flex items-center justify-center gap-[6px]">
                <i-icons-re-upload color="#11429D" class="leading-22px!" />
                <span class="leading-22px!">替换证书</span>
              </div>
            </a-link>
          </div>
        </div>
      </div>
    </div>
    <error-msg-dialog
      v-model="errorVisible"
      :error-text="certInfo?.error_msg ?? ''" />
    <license-details v-model="visible" :cert-id="certId" :source="source" />
  </div>
</template>
<script lang="ts" setup>
import { formatUnix } from '@/utils'
import ErrorMsgDialog from './ErrorMsgDialog.vue'
interface IProps {
  source: number
}
const props = withDefaults(defineProps<IProps>(), {})
const info = inject(licenseInfoKey)
const openUpload = inject(uploadLicenseKey)
const { visible: errorVisible, open: openError } = usePopup()
const certInfo = computed(() => {
  if (props.source === 1) {
    return info?.value?.manual_cert
  }
  return info?.value?.platform_cert
})
const success = computed(() => !certInfo.value?.error_msg)

const certId = computed(
  () =>
    (props.source === 1
      ? info?.value?.site_cert?.manual_cert_id
      : info?.value?.site_cert?.platform_cert_id) ?? ''
)
// 证书是否到期
const isExpired = computed(() => {
  const time1 = Math.floor(Date.now() / 1000)
  const time2 =
    props.source === 1
      ? info?.value?.manual_cert?.expired_at ?? 0
      : info?.value?.platform_cert?.expired_at ?? 0
  return time1 > time2
})
const { visible, open } = usePopup()
</script>
<style lang="less" scoped>
.license-info {
  display: flex;
  padding: 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  border-radius: 8px;
  border: 1px dashed var(---color-border-4, #dfe2e5);
  .expired-tag {
    height: 20px;
    border-radius: 8px 1px;
    padding: 2px 6px;
    margin-left: 4px;
  }
  .view-info {
    @apply flex gap-x-4;
    align-items: center;
  }
}
</style>
